<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">分割线-------------</div>
    <ul>
        <li>111111</li><li>111111</li><li>111111</li><li>111111</li>
    </ul>
    <script>
        // 1.创建元素对象(添加属性,样式)
        // 语法格式:document.createElement(元素名称);
        // 创建div元素节点
        var oDiv=document.createElement('div');
        console.log(oDiv);
        //往div这个创建好的div里面去添加了内容
        oDiv.innerHTML="我是卢不听课同学创建出来的元素";
        oDiv.style="width:200px;height:200px;background:orange";
        oDiv.onclick=function(){
            oDiv.style.background="skyblue";
        }

        // 2.添加元素,追加元素
        // 语法格式:父元素.appendChild(元素对象);
        // 将元素对象追加到某一个父元素的内部的最后的位置
        // 注意:元素只有父子关系,兄弟关系
        // 根元素:html
        document.body.appendChild(oDiv);

        // 3.插入元素,将元素插入到某个存在的元素的前面
        // 语法格式:父元素.insertBefore(插入的元素,存在的元素);
        var op=document.createElement('p');
        op.innerHTML='我要插入到box盒子的前面';
        document.body.insertBefore(op,document.querySelector('.box'));

        var op1=document.createElement('p');
        op1.innerHTML='我要插入到box盒子的后面';
        document.body.appendChild(op1);

        // 4.删除元素
        // 4.1删除父元素里面的子元素
        // 语法格式:父元素.removeChild(子元素)
        // 4.2删除元素自身
        // 语法格式:元素对象.remove()

        var box=document.querySelector('.box');
        // document.onclick=function(){
        //     box.remove();
        // }

        document.onclick=function(){
            document.body.removeChild(box)
        }
 
        // 5.克隆元素,复制元素
        // 语法格式:元素对象.cloneNode(true)
        // 参数为true表示克隆的时候包含元素对象里面的子元素
        var ul=document.querySelector('ul');
        var cloneUl= ul.cloneNode();//克隆
        console.log(cloneUl);
        document.body.appendChild(cloneUl);

        // 6.替换元素
        // 语法格式:父元素.replaceChild(替换的元素,被替换的元素);
        // 语法格式:父元素.replaceChild(新的元素,旧的元素);
        var lp=document.createElement('p');//<p></怕>
        var oul=document.querySelector('ul');//包含了li
        lp.innerHTML=oul.innerHTML;//提前去获取到ul里面的内容赋值了p里面
        document.body.replaceChild(lp,oul)





    </script>
</body>
</html>